<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <div class="head-container">
          <el-input
            v-model="query.goodsName"
            style="width: 200px;"
            class="filter-item"
            placeholder="文创名称"
            size="normal"
            clearable
          />

          <rrOperation />
        </div>
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="600px"
    >
      <el-form ref="form" :model="form" :inline="false" :rules="rules" size="small" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <!-- 类型 0.话术 1.指导建议 -->
          <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in dict.banner_type" :key="item.value" :label="item.label" :value="+item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort" />
        </el-form-item>
        <el-form-item label="链接" style="width: 100%;">
          <el-input v-model="form.linkValue" :rows="4" />
        </el-form-item>
        <el-form-item label="轮播图" prop="bannerImg">
          <el-upload
            v-loading="bannerImg_loading"
            class="avatar-uploader el-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="(params) => uploadRequest(params, 'bannerImg')"
            :show-file-list="false"
          >
            <img v-if="form.bannerImg" :src="form.bannerImg" class="avatar" />
            <div v-else class="upload-text">选择图片</div>
            <div class="btn" v-if="form.bannerImg">
              <el-button size="36" type="text" icon="el-icon-delete" @click.stop="deleteImg('bannerImg')"></el-button>
            </div>
          </el-upload>
          <el-input v-show="false" v-model="form.imagePath" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="bannerImg" label="轮播图">
        <template slot-scope="scope">
          <img :src="scope.row.bannerImg" style="width: 100px; height: 100px;" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <el-tag size="normal"
            ><span>{{ selectDictLabel(dict.banner_type, scope.row.type) }}</span></el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="ifShow" label="是否展示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.ifShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" />
      <el-table-column
        v-if="checkPer(['admin', 'serverDeploy:edit', 'serverDeploy:del'])"
        label="操作"
        width="150px"
        align="center"
      >
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudBanner from "@/api/mini/banner";
import { uploadFile } from "@/api/data";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
const defaultForm = { title: "", type: "", sort: "", imagePath: "", content: "", linkValue: "", bannerImg: "", id: "" };
export default {
  name: "Banner",
  dicts: ["banner_type"],
  components: { pagination, crudOperation, rrOperation, udOperation },
  cruds() {
    return CRUD({
      title: "展位图",
      url: "/api/banner/list",
      listMethod: "get",
      listKey: ["data"],
      totalKey: ["data", "total"],
      crudMethod: { ...crudBanner },
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],

  data() {
    return {
      accountList: [],
      accountMap: {},
      loading: false,
      bannerImg_loading: false,
      detailList: [],
      bannerList: [],
      dateRange: [],
      permission: {
        add: ["admin", "proportion:add"],
        edit: ["admin", "proportion:edit"],
        del: ["admin", "proportion:del"],
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        bannerImg: [{ required: true, message: "请上传图片", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
      },
    };
  },
  methods: {
    detailImgchange() {
      console.log("this.fileList :>> ", this.fileList);
    },

    uploadRequest(params, key) {
      console.log("params :>> ", params);
      this[`${key}_loading`] = true;
      uploadFile(params).then((res) => {
        console.log("res :>> ", res);
        this[`${key}_loading`] = false;
        this.form[key] = res.data;
        this.$set(this.form, key, res.data);
      });
    },
    uploadDetailRequest(params, listKey, key) {
      uploadFile(params).then((res) => {
        this[listKey].push({ name: params.file.name, url: res.data });
        this.form[key] = this[listKey].map((item) => item.url).join(",");
      });
    },

    deleteImg(key) {
      this.form[key] = "";
    },
    changeStatus(row) {
      const title = row.ifShow ? "确定要修改为显示吗?" : "确定要修改为不显示吗?";
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          crudBanner.changeBannerStatus(row.id).then((res) => {
            this.$message.success("修改成功");
            this.crud.toQuery();
          });
        })
        .catch(() => {
          row.ifShow = !row.ifShow;
        });
    },

    // 新增编辑前做的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      this.bannerList = form.showImage ? form.showImage.split(",").map((url) => ({ url })) : [];
      this.detailList = form.detailImage ? form.detailImage.split(",").map((url) => ({ url })) : [];
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
  display: inline-block;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409eff;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: inline-block;
  object-fit: cover;
}

.btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 178px !important;
  height: 178px;
  border-radius: 0 6px 0 6px;
  text-align: center;
  line-height: 178px;
}

.avatar-uploader:hover {
  // 鼠标悬浮显示按钮
  .btn {
    display: block;
  }
}
</style>
